<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="file" id="upload" />
    <button id="download" onclick="generate()">generate</button>
    <script>
      let input = document.getElementById("upload");
      let btn = document.getElementById("download");
      async function generate() {
        const img = await getImage();
        if (!img) return;
        const cvs = document.createElement("canvas");
        cvs.width = img.width;
        cvs.height = img.height;
        const ctx = cvs.getContext("2d");
        ctx.drawImage(img, 0, 0);
        const bmp = ctx.getImageData(0, 0, img.width, img.height).data;
        const html = createHTML(img.width, img.height, bmp);
        download(html);
      }
      function createHTML(width, height, data) {
        const shadowCSSFragments = [];
        for (let r = 0; r < height; r++) {
          for (let c = 0; c < width; c++) {
            const i = r * width + c;
            const R = data[i * 4];
            const G = data[i * 4 + 1];
            const B = data[i * 4 + 2];
            const A = data[i * 4 + 3] / 255;
            shadowCSSFragments.push(
              `${c + 1}px ${r}px rgba(${R},${G},${B},${A})`
            );
          }
        }
        return `
        <!DOCTYPE html>
        <html lang="en">
            <head>
                <meta charset="UTF-8" />
                <meta name="viewport" content="width=device-width, initial-scale=1.0" />
                <style>
                    .shadow-img {
                        width: ${width}px;
                        height: ${height}px;
                    }
                    .shadow-img .inner {
                        width: 1px;
                        height: 1px;
                        box-shadow: ${shadowCSSFragments.join(",")};
                        transition: 1.5s;
                    }
                </style>
            </head>
            <body>
                <div class="shadow-img">
                    <div class="inner">
                    </div>
                </div>
            </body>
        </html>`;
      }
      function download(html) {
        var blob = new Blob([html], { type: "text/html" });
        var url = window.URL.createObjectURL(blob);
        var a = document.createElement("a");
        a.href = url;
        a.style.display = "none";
        a.download = "demo.html";
        a.click();
      }
      function getImage() {
        const file = input.files[0];
        if (!file) return null;
        const objUrl = URL.createObjectURL(file);
        const img = new Image();
        return new Promise((resolve, reject) => {
          img.onload = () => {
            resolve(img);
          };
          img.onerror = () => {
            resolve(null);
          };
          img.src = objUrl;
        });
      }
    </script>
  </body>
</html>
